<template>
	<view class="search-content" id="page-search">
		<my-city/>
		<mSearch :show="false" butName="搜索" btnColor="#ffffff" @search="search($event)" backgroundColor="transparent" placeholder="搜索公交路线/站点"></mSearch> 
		<view class="list-content" v-if="searchList.length>0">
			<view class="result-box">搜索站点结果</view> 
			<uni-list>
				<uni-list-item 
					:title="item.lineName?item.lineName+'-线':item.lineSiteName+'-站'" 
					:show-extra-icon="true" 
					iconType="ali"
					:extra-icon="{color: '#4cd964',size: '22',type: 'e631',iconType:'ali'}"
					v-for="(item,index) in searchList" 
					:key="index" 
					 @click="handleDetails(item)"
				>
				</uni-list-item>
			</uni-list>
		</view>
	</view>
</template>

<script>
	import uniIcon from "@/components/uni-icon/uni-icon.vue"
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	import uniList from '@/components/uni-list/uni-list.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import myCity from "@/my-components/my-city.vue"
	import {mapState as indexState} from 'vuex'
	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers('search')
	export default {
		components:{mSearch,uniList,uniListItem,uniIcon,myCity},
		computed:{
			...mapState(['searchList'])   
		},
		methods: {
			...mapMutations(['SET_SEARCH_TEXT']),
			...mapActions(['GET_SEARCH_LIST','PASS_SITE','PASS_LINE']), 
			handleDetails(item){
				if(item.lineName){
					this.PASS_LINE(item._id)
					uni.navigateTo({
						url: '../../pages/line-details/line-details'
					});
				}else{
					this.PASS_SITE(item)
					uni.navigateTo({
						url: '../../pages/line-list/line-list'
					});
				}
			},
			search(e) {
				this.SET_SEARCH_TEXT(e) 
				this.GET_SEARCH_LIST()
					.then((res)=>{
						console.log("成功")
					})
					.catch(()=>{
						console.log("失败")
					})
				
			}
		}
	}
</script>

<style lang="scss">
	#page-search{
		padding: 0 20upx;
		background-color: $g-bg-color-primary;
	}
	.result-box{
		margin-top: 20upx;
		height: 80upx;
		line-height: 80upx;
		font-size:25upx;
		text-indent: 30upx;
		color: #aaaaaa;
	}
	.cur-city{
		font-size: 50upx;
		font-weight: 800;
		margin: 30upx 0;
	}
	.search-content {
		box-sizing: border-box;
		width: 100%;
	}

	.uni-input {
		margin: 20upx auto;
		border: 1upx solid #C8C7CC;
	}
</style>
